<template>
  <div class="uploadbox">
    <el-upload v-model:file-list="fileList" class="upload-demo" :on-change="handleChange" :auto-upload="false">
      <el-button type="primary" style="width: 40%; margin-left: 3%">选择</el-button>
      <template #tip>
        <el-button type="primary" style="width: 40%; margin-left: 3%" @click="handleUpload" :disabled="fileList.length === 0">
          上传
        </el-button>
        <div class="el-upload__tip">支持.doc.docx.pdf.png等类型,大小不超过10MB</div>
      </template>
    </el-upload>
  </div>
</template>

<script setup>
import { ref, defineEmits } from "vue";
import { ElMessage } from "element-plus";
import tool from "../utils/oss.js";

const fileList = ref([]);
const emit = defineEmits(["updateFilename"]); // 定义自定义事件

const handleChange = (uploadFile, uploadFiles) => {
  fileList.value = uploadFiles;
};

const handleUpload = async () => {
  let uploadResults = []; // 用于存储所有上传结果
  for (const file of fileList.value) {
    try {
      const res = await tool.oss.upload(file.raw);
      console.log(res);
      uploadResults.push(res.filename); // 收集所有文件名
    } catch (error) {
      console.error(error);
    }
  }
  ElMessage.success("上传成功");
  emit("updateFilename", uploadResults); // 一次性传递所有文件名
  fileList.value = []; // 清空文件列表
};
</script>

<style>
.uploadbox {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
</style>
